<template>
	<view :style="[$func.bg('bg.jpg')]" class="main_bg">
		<app-header title="个人信息"></app-header>
		<view class="textarea">
			<view class="cell flex-s">
				<view class="label">姓名</view>
				<view class="value">
					<u--input placeholder="请输入" border="none" v-model="form.name"
						placeholderStyle="color: #9D9D9D"></u--input>
				</view>
			</view>
			<view class="cell flex-s">
				<view class="label">身高</view>
				<view class="value">
					<u--input placeholder="请输入" border="none" v-model="form.height" placeholderStyle="color: #9D9D9D">
						<template slot="suffix">
							KG
						</template>
					</u--input>
				</view>
			</view>
			<view class="cell flex-s">
				<view class="label">体重</view>
				<view class="value">
					<u--input placeholder="请输入" border="none" v-model="form.weight" placeholderStyle="color: #9D9D9D">
						<template slot="suffix">
							KG
						</template>
					</u--input>
				</view>
			</view>
			<view class="cell flex-s">
				<view class="label">疾病</view>
				<view class="value" @click="show=true">
					{{diseaseName || '请选择'}}
				</view>
			</view>
			<view class="cell flex-s">
				<view class="label">座右铭</view>
				<view class="value">
					<u--input placeholder="请输入" border="none" v-model="form.motto"
						placeholderStyle="color: #9D9D9D"></u--input>
				</view>
			</view>
			<view class="btn flex-c" @click="onSubmit">
				<image src="/static/images/zu.png" style="width:34rpx;height:34rpx;margin-right:10rpx" mode="aspectFit">
				</image>
				您的分析报告
			</view>

		</view>

		<u-popup :show="show" @close="show=false" closeable>
			<view class="popup">
				<view class="p_title flex-c">请选择</view>
				<u-checkbox-group v-model="disease_ids" iconPlacement="right" placement="column" @change="boxChange()">
					<view class="boxcell" v-for="(item,index) in disease" :key="index">
						<u-checkbox :name="item.id" :label="item.item_name"></u-checkbox>
					</view>
				</u-checkbox-group>
				<view class="btn flex-c" @click="setDisease">
					确定
				</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				form: {
					disease_ids: []
				},
				content: "",
				disease: [],
				disease_ids: [],
			}
		},
		onLoad() {
			this.getInfo()
		},
		
		computed: {
			diseaseName() {
				const list = this.disease.filter(item => this.disease_ids.indexOf(item.id) > -1)
				const names = list.map(item => item.item_name)
				return names.join(',')
			}
		},
		methods: {
			setDisease() {
				let disease_ids = {}
				for (let vo of this.disease) {
					if (this.disease_ids.indexOf(vo.id) > -1) {
						if (disease_ids[vo.type_id]) {
							disease_ids[vo.type_id].push(vo.id)
						} else {
							disease_ids[vo.type_id] = [vo.id]
						}
						// const index = disease_ids.findIndex(item => item.type_id == vo.type_id)
						// if (index == -1) {
						// 	disease_ids.push({
						// 		type_id: vo.type_id,
						// 		ids: [vo.id]
						// 	})
						// } else {
						// 	disease_ids[index].ids.push(vo.id)
						// }
					}
				}
				this.$set(this.form, 'disease_ids', JSON.stringify([disease_ids]))
				this.show = false
			},
			boxChange() {

			},
			getInfo() {
				this.$http.post("/data/api.auth.User/getMotto").then(res => {
					this.form = {
						name: res.data.user.name,
						height: res.data.user.height,
						weight: res.data.user.weight,
						motto: res.data.user.motto,
					}
					this.disease = res.data.motto
					this.disease_ids = res.data.disease_ids
					this.setDisease()
				})
			},
			onSubmit() {
				if (!this.form.name) {
					uni.showToast({
						icon: "none",
						title: '请输入姓名'
					})
					return
				}
				if (!this.form.height) {
					uni.showToast({
						icon: "none",
						title: '请输入身高'
					})
					return
				}
				if (!this.form.weight) {
					uni.showToast({
						icon: "none",
						title: '请输入体重'
					})
					return
				}
				if (!this.form.disease_ids) {
					uni.showToast({
						icon: "none",
						title: '请输入疾病'
					})
					return
				}
				if (!this.form.motto) {
					uni.showToast({
						icon: "none",
						title: '请输入座右铭'
					})
					return
				}
				this.$http.post("/data/api.auth.User/addBase", this.form).then(res => {
					uni.showToast({
						icon: "none",
						title: '提交成功'
					})
					this.$func.toUrl('/pages/user/result')
				})

			}

		}
	}
</script>

<style scoped lang="scss">
	.textarea {
		width: 554rpx;
		background: rgba(255, 255, 255, 0.17);
		padding-bottom: 50rpx;
		border: 4rpx solid #FFFFFF;
		opacity: 1;
		border-radius: 10rpx;
		margin: 64rpx auto;

		.cell {
			margin: 60rpx;

			.label {
				width: 100rpx;
				font-size: 32rpx;
				font-weight: 400;
			}

			.value {
				flex: 1;
				color: #9D9D9D;
			}
		}



		.title {

			height: 102rpx;
			background: rgba(249, 233, 116, 0.39);
			opacity: 1;
			border-radius: 10rpx 10rpx 0px 0px;

		}

		.area {
			flex: 1;

			/deep/ .u-textarea {
				background-color: rgba(0, 0, 0, 0);
				border: none;

			}
		}
	}

	.tel {
		text-align: center;

	}

	.btn {
		width: 436rpx;
		height: 90rpx;
		background: rgba(255, 245, 117, 1);
		border-radius: 10px;
		font-size: 32rpx;

		color: #9B751C;
		margin: 0 auto 0;
	}

	.boxcell {
		padding: 20rpx 30rpx;
		border-bottom: 1px solid #eee;
	}

	.p_title {
		height: 44px;
	}

	.popup {
		padding-bottom: 20rpx;
	}
</style>